<template>
  <a-card style="padding: 5px 15px">
    <div class="user">
      <a-avatar
        :src="avatar"
        alt="用户头像"
        style="width: 60px; height: 60px"
      ></a-avatar>
      <div class="username">
        <p class="username">{{ username }}</p>
        <p class="role">超级管理员</p>
      </div>
    </div>
    <p>上次登录Ip：127.0.0.1</p>
    <p>上次登录时间：{{ updateDate }}</p>
  </a-card>
</template>

<script setup>
import { userStore } from "@/store/modules/user.js";
import { computed, getCurrentInstance } from "vue";
const user = userStore();
const updateDate = computed(() => user.userinfo.updateDate);
const username = computed(() => user.userinfo.username);
const avatar = computed(() => user.userinfo.avatar);
</script>

<style lang="scss" scoped>
.user {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }

  p {
    margin: 10px 0;
  }

  .username {
    color: #909399;
    font-size: 18px;
  }

  .role {
    color: red;
    font-weight: 600;
    font-size: 16px;
  }
}
</style>
